Design Systems 101 設計系統 101

核心思想：設計系統透過整合元件、模式、風格指南等要素，幫助大型組織在設計和開發中保持一致性和高效性，減少重複工作並提高可維護性。

為什麼需要設計系統？

設計系統的價值：

在大型公司或專案中，不同團隊、部門通常會參與設計和開發，設計系統確保了大家的設計風格、開發程式碼的一致性。

設計系統提供了一套標準化的、可複用的設計語言，使團隊可以在不失去品牌一致性的前提下快速響應市場需求和客戶反饋。

設計系統的優勢：

跨團隊協作：設計和開發團隊都可以基於同一個系統進行工作，減少溝通成本。例如，一個開發團隊在構建新的網頁或功能時，不必從零設計和編碼，可以直接使用現有元件，確保風格一致。

效率提升：

設計師可以集中精力於高價值的設計任務，而不是重複設計通用元素。開發人員可以複用設計系統中的現成程式碼模組，減少了編碼和測試時間。

品牌一致性：

設計系統確保了品牌的視覺和語言的一致性，任何產品或服務都能呈現出統一的風格。

例如，NASA的設計系統統一了標誌、色彩、排版等，使不同部門釋出的所有內容都符合品牌調性和標準。

1976 年美國國家航空航天局（NASA）圖形標準手冊（NHB 1430.2）是一個全面的品牌風格指南的範例。它所提供的遠不止是非常現代的視覺示例：有關色彩搭配以提高可見性和可讀性的指南，明確的設計原則，如“標誌應被視為一個大規模的標題；因此，語言應清晰簡潔。為了快速傳達資訊，尤其是向車輛駕駛員傳達資訊，簡潔是可取的。”

設計系統的組成部分

元件庫（Component Library）

定義：元件庫包含了一組可複用的UI元素，例如按鈕、輸入框、導航欄等，每個元件都包含設計和實現的詳細說明。

組成內容：每個元件包括設計規範（如顏色、尺寸、狀態）和程式碼實現（如HTML、CSS、JavaScript），便於設計師和開發人員複用。元件通常具有多種狀態（例如：啟用、禁用、懸停、點選），確保在各種互動下保持一致性。

作用：元件庫提升了工作效率，設計人員和開發人員可以從中提取現成的元素，避免重複設計和編碼。確保不同介面或頁面的元件外觀和行為一致，提高使用者體驗的一致性。

示例：GitHub的Primer元件庫中包含了按鈕、卡片、模態框等常用元件，使開發者在建立介面時可以快速呼叫一致的UI元素。

模式庫（Pattern Library）

定義：模式庫包含了一組由多個元件組合而成的UI設計模式，適用於特定的互動場景，如表單設計、導航結構、搜尋功能等。

組成內容：模式庫中的模式通常由元件庫中的多個元素組成，以滿足更復雜的設計需求。每個模式包括如何實現和應用的詳細說明，幫助設計師理解和複用。

作用：模式庫幫助團隊解決常見設計問題，如如何佈局導航欄、表單和過濾器等。保證在不同頁面和功能中使用相同的互動模式，使使用者的體驗更加一致和連貫。

Mailchimp的設計系統中包含了表單模式和導航模式，使產品介面的使用者體驗連貫一致。

元件庫（Component Library）

定義：元件庫（又稱設計庫）是一組標準化、可複用的UI元素，包含了從按鈕到輸入框等常用元件的設計和實現細節。元件庫通常由設計師和開發人員共同維護。

組成部分：

  • 元件名稱：每個元件都需有明確的名稱，以便於設計師和開發人員識別和使用。
  • 描述：對元件的用途進行描述，包括何時及如何使用。
  • 屬性：元件可自定義的屬性（如顏色、尺寸、文字），以適應不同的設計需求。
  • 狀態：不同互動狀態下的元件樣式，例如預設、懸停、禁用等。
  • 平臺和框架支援：元件庫通常基於某些設計框架（如Bootstrap），以便於跨平臺的設計一致性和開發效率提升。

作用：元件庫減少了重複勞動，提高了設計和開發的效率，確保了跨頁面和應用的UI一致性。

示例：Google的Material Design元件庫包括詳細的按鈕規範，如顏色、狀態、程式碼實現等，確保設計和開發團隊可以快速應用和複用這些標準化的元件。

IBM 的 Carbon 設計系統具有使用、風格和程式碼指南，以及可訪問性考慮因素，還有一個程式碼沙箱，供設計人員和開發人員在實施前視覺化任何自定義內容。

模式庫（Pattern Library）

定義：模式庫包含由多個元件組合而成的UI模式，適用於更復雜的互動需求，例如頁面頭部、表單佈局等。區別：元件庫和模式庫有時會混淆，但模式庫更多地關注元件的組合方式和高層次的內容結構。

組成內容：

頁面佈局：定義不同頁面的標準佈局結構，如頭部、主內容區和側邊欄等。

互動模式：為特定的使用者互動場景提供解決方案，例如導航選單、登入表單等。

作用：模式庫為常見的使用者互動場景提供了現成的設計模板，有助於設計師在構建複雜頁面時保持一致性和節省時間。

示例：Atlassian的設計系統提供了頁面頭部的詳細規範，包括標題、麵包屑導航、搜尋欄和按鈕等，幫助不同團隊建立一致的使用者體驗。
雖然許多公共部門的網站還有很長的路要走，但美國網頁設計系統（USWDS）是一個很好的起點，它透過明確的指導方針將許多不同的部門和機構統一起來。USWDS 規定了頁面模板（如上圖所示），以及設計原則、元件和編碼規範。

Design-System Team 設計系統團隊

角色和職責：

設計系統團隊：負責建立和維護設計系統，通常包括產品設計師、UI/UX設計師、前端開發人員和研究員。這個團隊管理設計系統的更新，確保其始終符合最新的設計需求和品牌標準。

跨部門合作：設計系統團隊需要與公司內的其他部門（如產品、開發、市場）保持緊密溝通，以確保設計系統符合實際需求。

資源和支援：高層管理支援對於設計系統的成功實施至關重要。透過向管理層傳達設計系統的長期價值，可以獲得所需的預算和人力資源支援。

維護設計系統的重要性：設計系統需要定期更新和維護，以跟上新需求、市場變化和使用者反饋，避免因過時而影響產品體驗。

設計系統的三種實施方法

方法1：採用現有設計系統（Adopt an Existing Design System）

成本：低

定製化程度：低

品牌一致性：較低

適用場景：預算有限、時間緊迫的公司可以直接採用現有的設計系統（如Material Design或Bootstrap），迅速開始實施。

方法2：調整現有設計系統（Adapt an Existing Design System）

成本：中等

定製化程度：中等

品牌一致性：中等

適用場景：對品牌一致性有一定要求，但資源有限的公司可以在現有設計系統基礎上進行部分調整，以適應品牌需求。

方法3：建立自定義設計系統（Create a Custom Design System）

成本：高

定製化程度：高

品牌一致性：高

適用場景：對於品牌調性要求嚴格、有足夠資源的大公司，可以從頭建立一個完全符合品牌的自定義設計系統，以實現高度的品牌一致性。

根據預算和需求，公司可以選擇以下三種設計系統的方法之一：完整採用現有系統，根據公司需求調整現有系統，或建立一個全新的系統。

結論

設計系統的長期價值：設計系統幫助團隊在大規模設計中保持一致性和高效性，減少重複工作，確保品牌一致性。

動態性：設計系統並非一成不變，而是需要隨市場需求和使用者反饋不斷更新和調整。

關鍵作用：在產品快速迭代的環境中，設計系統不僅能提高工作效率，還能幫助公司建立一致的品牌體驗，促進使用者信任感的提升。